<template>
  <div class="app-container">
    <FormExceptiontRecordFilter @on-filter="submitFilterForm"/>
    <el-table
      :data="tableData.list"
      height="500"
      v-loading="loading"
      element-loading-text="加载中..."
      border
      class="el-table-align-center"
    >
      <!--<el-table-column width="50" label="序号" type="index" align="center">-->
      <!--</el-table-column>-->
      <el-table-column label="充值时间" align="center">
        <template slot-scope="{row}">
          <div>{{row.rechargeDate | toTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="账户类型" align="center">
        <template slot-scope="{row}">
          <div>{{row.userType === 0 ? '会员' : '代理'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="账户名" prop="username" align="center">
      </el-table-column>
      <el-table-column label="操作端" prop="osType" align="center">
        <template slot-scope="{row}">
          <div>{{formatOsType(row.osType)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="收款商户" prop="channelName" align="center">
      </el-table-column>
      <el-table-column label="收款商户号" prop="merchantCode" align="center">
      </el-table-column>
      <el-table-column label="异常状态" prop="errorStatus" align="center">
        <template slot-scope="{row}">
          <div>{{row.errorStatus === 0 ? '系统' : '三方'}}-订单创建失败</div>
        </template>
      </el-table-column>
      <el-table-column label="异常原因" prop="errorMsg" align="center">
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>


<script>

// components
import FormExceptiontRecordFilter from './formExceptiontRecordFilter';

// mixins
import { grid, constsLabel, dialog } from '@/build';

// services
import { getRecordExceptionRecord } from '@/services/api/recharge';

export default {
  name: 'recharge-logs',
  components: {
    FormExceptiontRecordFilter,
  },
  mixins: [grid, constsLabel, dialog],
  data() {
    return {
      tableData: {},
      rowData: {},
      filters: {
        page: 1,
        size: 20,
        userType: -1,
        userName: null,
        channelId: null,
        merchantCode: null,
        errorStatus: '-1',
        startTime: moment().format('YYYY-MM-DD 00:00:00'),
        endTime: moment().format('YYYY-MM-DD 23:59:59'),
        osType: -1,
      },
      filterDateType: false,
    };
  },
  methods: {
    submitFilterForm(data) {
      const { time } = data;
      let startTime;
      let endTime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        [startTime, endTime] = time;
      }

      this.filters = {
        ...this.filters, ...data, startTime, endTime,
      };
      this.getAll();
    },
    formatOsType(data) {
      return consts.PAYMENT_PLATFORM.find(item => item.value === data).title;
    },
  },
  mounted() {
    // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '充值异常记录', true) });
    this.bindGet(getRecordExceptionRecord, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        delete data.time;
        return data;
      },
    });
    this.getAll();
  },
};
</script>

<style scoped>

</style>
